<template>
	<view>
		<view class="shop-title"><text class="name">商品推荐</text><!--<text class="more" @tap="handleShopMore()">更多</text>--></view>
		<view class="shop-list">
			<view class="li" v-for="(item,index) in goodsList" @click="_advertJump(item)" :key="index">
				<image class="pic" :src="item.logo" mode="aspectFill"></image>
				<view class="name">{{ item.prodName }}</view>
				<view class="info">
					<view class="price"><text class="unit">￥</text>{{ item.price }}</view>
					<view class="distance">{{ item.shopName }}</view>
				</view>
			</view>
		</view>
		
		<!--<view class="no-data" @tap="handleShopMore()">查看更多</view>-->
	</view>
</template>

<script>
	import {
		getCommunityRecommend
	} from '@/api/index/indexApi.js';
	import {
		getCommunityId
	} from '@/api/community/communityApi.js'
	export default {
		name: "communityRecommend",
		data() {
			return {
				goodsList: [],
			};
		},
		props: {
			objType: {
				type: String,
				default: '3003',
			},
		},
		created() {
			this._loadCommunityRecommends();
		},
		methods: {
			_loadCommunityRecommends: function() {
				let _that = this;

				//查询 广告
				getCommunityRecommend({
						communityId: getCommunityId(),
						page: 1,
						row: 100
					})
					.then(function(_json) {
						_that.goodsList = _json.data;
					});
			},
			_advertJump: function(_recommend) {
				if(_recommend.url == 'NULL'){
					uni.showToast({
						icon:'none',
						title:'暂无推荐，请到商城系统配置小区推荐',
						duration:5000
					});
					return;
				}
				this.vc.navigateTo({
					url: _recommend.url
				})
			},
			/*handleShopMore() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}*/
		}
	}
</script>

<style lang="scss" scoped>
	.shop-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 25rpx 20rpx 20rpx 25rpx;
		.name {
			display: flex;
			align-items: center;
			color: #909399;
			&:before {
				content: '';
				display: block;
				height: 30rpx;
				margin-right: 15rpx;
				border-left: 5rpx solid #DDD;
			}
		}
		.more {
			display: flex;
			align-items: center;
			height: 40rpx;
			color: #909399;
			font-size: 24rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;
			background: #F5F5F5;
		}
	}
	.shop-list {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		padding: 0 10rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: #FFF;
		/*&::after {
			content: '';
			position: absolute;
			left: 25rpx;
			right: 25rpx;
			bottom: 0;
			display: block;
			border-bottom: 1rpx solid #EEE;
		}*/
		.li {
			width: 50%;
			padding: 22rpx 12rpx;
			box-sizing: border-box;
			.pic {
				position: relative;
				height: 320rpx;
				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					display: block;
					opacity: 0.07;
					border: 1rpx solid #000;
				}
			}
			.name {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-top: 10rpx;
			}
			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.unit {
					font-size: 24rpx;
				}
				.price {
					color: #FA5151;
					font-size: 32rpx;
				}
				.distance {
					overflow: hidden;
					max-width: 9em;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: #909399;
					font-size: 20rpx;
					padding: 0 10rpx;
					border-radius: 5rpx;
					/*padding-left: 30rpx;*/
					/*background: url(/static/images/icon-location.png) no-repeat 0 50%;*/
					background-size: auto 25rpx;
					background-color: #F7F7F7;
				}
			}
		}
	}
</style>